import React, { useState } from 'react'
import { createContainer } from 'unstated-next'
import { Button } from 'antd'


function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContainer(useCounter)

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg mt-6">
      <Button onClick={counter.decrement}>-</Button>
      <span>{counter.count}</span>
      <Button onClick={counter.increment}>+</Button>
    </div>
  )
}

function App() {
  return (
    <Counter.Provider>
      <button
        className="text-center mx-auto block m-4"
        w-bg="blue-500 hover:blue-400"
        w-text="white"
        w-p="y-2 x-4"
        w-border="1 rounded blue-500 hover:blue-400">
        Windi CSS - Button
      </button>
      <CounterDisplay />
      <Counter.Provider initialState={2}>
        <div className="container mx-auto">
          <CounterDisplay />
        </div>
      </Counter.Provider>
    </Counter.Provider>
  )
}

export default App
